<template>
  <div class="index-wrap">
    <el-row :gutter="20">
      <el-col :xs="24" :sm="24" :md="8" :xl="8" :lg="8">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">志愿者服务时长排行榜</div>
          </div>
          <div class="medical-chart1">
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="service_time"
              :element-loading-text="elementLoadingText"
              stripe
              :header-row-style="{ color: '#fff', background: 'linear-gradient(90deg, #006CEA, #233C66)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="服务时长"
                prop="time"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :xl="8" :lg="8">
        <div class="medical-item medical-left-top">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">爱心人士捐款排行榜</div>
          </div>
          <div class="medical-chart1">
            <el-table
              ref="tableSort"
              v-loading="listLoading"
              :data="help_money"
              :element-loading-text="elementLoadingText"
              stripe
              :header-row-style="{ color: '#fff', background: 'linear-gradient(90deg, #006CEA, #233C66)' }"
              :header-cell-style="{
                background: 'rgba(0, 0, 0, 0)',
                color: '#fff',
              }"
              header-cell-class-name="tableCell"
              row-class-name="tableRow"
              :highlight-current-row="false"
              class="tableSort"
            >
              <el-table-column
                show-overflow-tooltip
                prop="name"
                label="姓名"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="性别"
                prop="sex"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="年龄"
                prop="age"
                align="center"
              ></el-table-column>
              <el-table-column
                show-overflow-tooltip
                label="捐款金额"
                prop="sum_num"
                align="center"
              ></el-table-column>
            </el-table>
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="8" :xl="8" :lg="8">
          <div class="medical-item medical-left-top">
            <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
            <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
            <div class="medical-header">
              <div class="medical-title">爱心人士捐赠物资排行榜</div>
              <el-date-picker
                v-model="year1"
                type="month"
                :editable="false"
                placeholder="选择年月"
                class="fr"
                value-format="yyyy-MM"
                @change="handleChange"
              ></el-date-picker>
            </div>
            <div class="medical-chart1 medical-chart4">
              <el-table
                ref="tableSort"
                v-loading="listLoading"
                :data="help_goods"
                :element-loading-text="elementLoadingText"
                stripe
                :header-row-style="{ color: '#fff', background: 'linear-gradient(90deg, #006CEA, #233C66)' }"
                :header-cell-style="{
                  background: 'rgba(0, 0, 0, 0)',
                  color: '#fff',
                }"
                header-cell-class-name="tableCell"
                row-class-name="tableRow"
                :highlight-current-row="false"
                class="tableSort"
              >
                <el-table-column
                  show-overflow-tooltip
                  prop="name"
                  label="姓名"
                  align="center"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="性别"
                  prop="sex"
                  align="center"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="年龄"
                  prop="age"
                  align="center"
                ></el-table-column>
                <el-table-column
                  show-overflow-tooltip
                  label="捐款物件"
                  prop="sum_num"
                  align="center"
                ></el-table-column>
              </el-table>
            </div>
          </div>
        </el-col>
    </el-row>
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :xs="24" :sm="24" :md="12" :xl="12" :lg="12">
        <div class="medical-item">
          <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
          <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
          <div class="medical-header">
            <div class="medical-title">已分配捐款统计</div>
            <el-date-picker
              v-model="year1"
              type="month"
              :editable="false"
              placeholder="选择年月"
              class="fr"
              value-format="yyyy-MM"
              @change="handleChange"
            ></el-date-picker>
          </div>
          <div class="medical-chart1">
            <v-chart
              autoresize
              :option="chart1"
              style="width: 100%; height: 100%"
            />
          </div>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :md="12" :xl="12" :lg="12">
          <div class="medical-item medical-left-top">
            <img class="medical-top" src="@/assets/medical/left-top-bg.png" alt="">
            <img class="medical-bot" src="@/assets/medical/left-bot-bg.png" alt="">
            <div class="medical-header">
              <div class="medical-title">已分配物资统计</div>
              <el-date-picker
                v-model="year1"
                type="month"
                :editable="false"
                placeholder="选择年月"
                class="fr"
                value-format="yyyy-MM"
                @change="handleChange"
              ></el-date-picker>
            </div>
            <div class="medical-chart1">
              <v-chart
                autoresize
                :option="chart2"
                style="width: 100%; height: 100%"
              />
            </div>
          </div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
  import * as echarts from "echarts";
  import VChart from 'vue-echarts'
  import { use } from "echarts/core";
  import { CanvasRenderer } from "echarts/renderers";
  import { PieChart } from "echarts/charts";
  import {
    TitleComponent,
    TooltipComponent,
    LegendComponent
  } from "echarts/components";
  use([
    CanvasRenderer,
    PieChart,
    TitleComponent,
    TooltipComponent,
    LegendComponent
  ]);
  import { gethelporder } from "@/api/helpManager"
  export default {
    name: "Index",
    components: {
      VChart
    },
    data() {
      return {
        year1: "2021-10",
        listLoading: false,
        elementLoadingText: "加载中...",
        service_time: [],
        help_money: [],
        help_goods: [],
        data_money: [],
        data_goods: [],
        //已分配捐款统计
        chart1: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "6%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontSize: 12
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "元",
              nameGap: 25,
              nameTextStyle: {
              	color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#226CA3',
                		fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
              name: "元",
              type: "bar",
              data: [],
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new echarts.graphic.LinearGradient(
                  		0, 0, 0, 1,
                  		[
                  				{offset: 0, color: '#01B1FF'},
                  				{offset: 1, color: '#035CFF'}
                  		]
                  ),
                }
              },
            },
          ],
        },
        //已分配物资统计
        chart2: {
          color: ['#0B7AFD'],
          grid: {
            top: "20%",
            bottom: "13%",
            left: "6%",
            right: "2%",
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: 'cross',
              label: {
                color: "#ffffff",
                borderColor: "#0B7AFD",
                shadowColor: "#0B7AFD",
                backgroundColor: '#0B7AFD'
              },
            },
          },
          xAxis: {
            data: [],
            axisLine: {
              show: false
            },
            axisTick: {
              show: false, //隐藏X轴刻度
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: '#226CA3',
                fontSize: 12
              }
            },
          },
          yAxis: [
            {
              type: "value",
              name: "件",
              nameGap: 25,
              nameTextStyle: {
              	color: '#226CA3',
                padding: [0, 0, 0, -30]
              },
              splitLine: {
                show: true,
                lineStyle: {
                  color: "#163670",
                  width: 0.5
                }
              },
              axisTick: {
                show: false,
              },
              axisLine: {
                show: false
              },
              axisLabel: {
                show: true,
                textStyle: {
                		color: '#226CA3',
                		fontSize: 14,
                    fontWeight: "bold"
                }
              },
            },
          ],
          series: [
            {
              name: "件",
              type: "bar",
              data: [],
              barWidth: 10,
              itemStyle: {
                normal: {
                  barBorderRadius: 5,
                  color: new echarts.graphic.LinearGradient(
                  		0, 0, 0, 1,
                  		[
                  				{offset: 0, color: '#01B1FF'},
                  				{offset: 1, color: '#035CFF'}
                  		]
                  ),
                }
              },
            },
          ],
        },
      };
    },
    created() {},
    beforeDestroy() {},
    mounted() {
      var date = new Date() // 获取时间
      var year = date.getFullYear() // 获取年
      var month = date.getMonth() + 1 // 获取月
      this.year1 = year + '-' + month
      gethelporder().then(res => {
        const data = res.data;
        this.service_time = data.service_time;
        this.help_money = data.help_money;
        this.help_goods = data.help_goods;
        let data_money = [];
        let data_goods = [];
        //已分配捐款统计
        let xAxis1Data = [];
        //已分配物资统计
        let xAxis2Data = [];
        for (const key in data.data_money) {
          if (data.data_money.hasOwnProperty(key)) {
            const element = data.data_money[key];
            data_money.push(element);
            xAxis1Data.push(key)
          }
        }
        for (const key in data.data_goods) {
          if (data.data_goods.hasOwnProperty(key)) {
            const element = data.data_goods[key];
            data_goods.push(element);
            xAxis2Data.push(key)
          }
        }

        this.chart1.series[0].data = data_money.map(Number);
        this.chart1.xAxis.data = xAxis1Data;

        this.chart2.series[0].data = data_goods.map(Number);
        this.chart2.xAxis.data = xAxis2Data;
      })
    },
    methods: {

      handleChange(value) {

      },
    },
  };
</script>
<style lang="scss" scoped>

  @keyframes rotate {
  	    from {
  	        transform: rotate(0deg);
  	    }
  	    to {
  	        transform: rotate(360deg);
  	    }
  	}
    ::v-deep {
      .tableCell {
        .cell {
          color: #fff;
        }
      }

      .el-table thead{
        height: 35px;
      }

      .el-table {
        background-color: transparent;
        &::before{
          height: 0;
        }
      }

      .el-table td.el-table__cell,
      .el-table th.el-table__cell.is-leaf{
        border: none;
      }

      .el-table .cell {
        line-height: 1;
      }

      .el-table--enable-row-hover .el-table__body tr:hover > td.el-table__cell{
        background-color: transparent;
      }

      .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell{
        background-color: #627dae80;
      }

      .tableRow {
        color: #fff;
        background-color: transparent;
        height: 42px;
        &:hover {
          td {
            background-color: transparent;
          }
        }
        .cell {
          color: #fff;
        }
      }
    }
    #charts{
      height: 100%;
    }
    .charts-right{
      text-align: center;
      position: absolute;
      top: 398px;
      width: 100%;
      left: 0;
      p{
        font-size: 28px;
        color: #ffffff;
      }
      span{
        margin-top: 10px;
        font-size: 37px;
        color: #fff;
        display: block;
      }
    }
    .fr{
        width: 117px;
        position: absolute;
        right: 23px;
        background: transparent;
        ::v-deep{
          .el-input__inner{
            border-color: #334973;
            background: transparent;
            color: #fff;
          }
          .el-input__prefix{
                font-size: 20px;
                color: #5391d9;
          }
        }
    }
    .medical-right-wrap{
      display: flex;
      align-items: center;
      justify-content: space-around;
      .medical-right-chart-item{
        width: 200px;
        height: 200px;
        position: relative;
        &::before{
          content: "";
          display: block;
          position: absolute;
          box-sizing: border-box;
          left: 0;
          top: 0;
          width: 200px;
          height: 200px;
          border-radius: 50%;
          border: 14px dashed #344059;
          animation: rotate 30s infinite;
        }
      }
      .medical-right-title{
        font-size: 18px;
        color: #FFFFFF;
        text-align: center;
        margin-top: 26px;
      }
    }
  .index-wrap {
    min-height: calc( 100vh - 65px) !important;
    box-sizing: border-box;
    width: 100%;
    padding: 20px 30px !important;
    margin: 0 !important;
    background: url(../../assets/medical/bg.png) no-repeat;
    background-size: cover;
    .medical-left-top{
      height: 348px;
    }
    .medical-right-top{
      height: 718px;
      .medical-chart1{
        height: 678px;
        position: relative;
      }
    }
    .medical-chart4{
      position: relative;
    }
    .medical-room-wrap{
      position: absolute;
      display: flex;
      flex-direction: column;
      top: 52px;
      right: 40px;
      text-align: center;
      color: #597093;
      .room-text {
          margin: 12px 0;
          padding-left: 16px;
          line-height: 13px;
          position: relative;
          &::before{
            content: "";
            display: block;
            position: absolute;
            left: 0;
            top: 1px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background-color: #5583FF;
          }
          &:nth-child(1) {
            &::before {
              background-color: #9B4AF8;
            }
          }
          &:nth-child(2) {
            &::before {
              background-color: #FB497C;
            }
          }
          &:nth-child(3) {
            &::before {
              background-color: #3EE09A;
            }
          }
          &:nth-child(4) {
            &::before {
              background-color: #5583FF;
            }
          }
          &:nth-child(5) {
            &::before {
              background-color: #FF8D00;
            }
          }
          &:nth-child(6) {
            &::before {
              background-color: #FFC000;
            }
          }
      }
    }
    .medical-chart2{
      width: 100%;
      height: 300px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-around;
      .medical-bot-title{
        text-align: center;
        font-size: 16px;
        color: #FFFFFF;
        line-height: 60px;
      }
      .medical-right-title{
        font-size: 16px;
        color: #FFFFFF;
        text-align: center;
        margin-top: 26px;
      }
    }
    .medical-chart1{
      width: 100%;
      height: 300px;
      padding: 0 22px 8px 23px;
      box-sizing: border-box;
      margin-top: 10px;
    }
    .medical-chart1-xline{
      position: absolute;
      top: 72px;
      left: 23px;
      font-size: 13px;
      color: #226CA3;
      line-height: 12px;
      font-weight: bold;
    }
    .medical-chart1-xline li:nth-child(n+2){
      margin-top: 42px;
    }
    .medical-item{
      width: 100%;
      border: 2px solid #394E75;
      border-radius: 10px 0px 0 10px;
      position: relative;
      background: rgba(36, 57, 96, 0.13);
      box-shadow: inset 0 0 19px rgb(26 61 122);
      .medical-header{
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 23px 20px 0 23px;
        height: 40px;
        box-sizing: border-box;
        .medical-title{
          position: absolute;
          font-size: 20px;
          color: #ffffff;
          font-weight: bold;
          padding-left: 20px;
          line-height: 20px;
          &::before{
            content: "";
            position: absolute;
            left: 0;
            top: 0;
            width: 11px;
            height: 20px;
            background-color: #009CFF;
          }
        }
      }
      &::before{
        content: "";
        display: block;
        position: absolute;
        right: -2px;
        top: -2px;
        width: 0;
        height: 0;
        border-top: 7px solid #4DBECE;
        border-left: 7px solid transparent;
        z-index: 1;
      }
      &::after{
        content: "";
        display: block;
        position: absolute;
        right: -1px;
        bottom: -1px;
        width: 0;
        height: 0;
        border-bottom: 17px solid #4DBECE;
        border-left: 17px solid transparent;
      }
      .medical-top{
        width: 71px;
        height: 65px;
        position: absolute;
        left: -2px;
        top: -4px;
        z-index: 1;
				object-fit: inherit;
      }
      .medical-bot{
        width: 71px;
        position: absolute;
        left: -2px;
        bottom: -4px;
        z-index: 1;
      }
    }
  }
</style>
